<template>
  <div class="app-container">
    <!-- 查询模块 -->
    <div class="formDiv">
      <el-form ref="form" :inline="true" :model="form" label-width="130px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="会员手机号">
              <el-input />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签类别筛选">
              <el-input />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button style="margin-left:60px" type="primary">查询</el-button>
              <el-button class="addbtn" type="primary" @click="keywordFn('add')">新建关键字</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 关键字新增 -->
    <el-dialog
      :title="titleKey"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="468px"
    >
      <!-- 输入框 -->
      <el-form
        ref="addForm"
        :inline="true"
        label-width="80px"
        :rules="rules1"
        :model="addForm"
        label-position="right"
      >
        <el-form-item label="标签名称" prop="username">
          <el-input v-model="addForm.username" />
        </el-form-item>
        <el-form-item label="标签类别" prop="username">
          <el-input v-model="addForm.username" />
        </el-form-item>
        <el-form-item label="关联活动" prop="username">
          <el-input v-model="addForm.username" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose()">取 消</el-button>
        <el-button type="primary" @click="addSubmit()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 主页列表 -->
    <div v-loading="tableLoading" class="listDiv">
      <!-- table列表 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          fixed
          type="index"
          label="编号"
          width="50"
          align="center"
          :index="table_index"
        />
        <el-table-column prop="a" label="关键字名称" />
        <el-table-column prop="a" label="关键字类别" />
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="keywordFn('edit',scope.row.a)">编辑</el-button>
            <el-button
              type="text"
              size="small"
              @click="toRoutes('joinFacilitator',scope.row.userId)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagesCon">
        <div>
          <el-pagination
            :current-page="listForm.pageNum"
            :page-sizes="page_sizes"
            :page-size="listForm.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page_totals"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import vipManage from "@/api/vipManage";
export default {
  name: 'VipIndex',
  filters: {
    cardType: function(e) {
      return window.helper.cardType(String(e))
    }
  },
  data() {
    // 手机号校验
    var validatePhone = (rule, value, callback) => {
      const isRate = /^(((13[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[3-8]{1})|(18[0-9]{1})|(19[0-9]{1})|(14[5-7]{1}))+\d{8})$/
      if (!value) {
        // alert('空')
        callback(new Error('请输入手机号'))
      } else if (!isRate.test(value)) {
        callback(new Error('请输入正确手机号'))
      } else {
        callback()
      }
    }
    return {
      dialogVisible: false,
      tableLoading: true,
      dates: [],
      form: {
        username: '',
        nickName: '',
        realName: '',
        refereePhone: '',
        status: '',
        createdAtStart: '',
        createdAtEnd: '',
        pageNum: 1,
        pageSize: 10
      },
      tableData: [
        {
          a: 'a',
          b: 'b',
          c: 'c',
          d: 'd'
        }
      ],
      page_sizes: [10, 30, 50, 100],
      page_totals: 1,
      listForm: {
        pageNum: 1,
        pageSize: 10
      },
      autoUpdate: 0,
      addForm: {
        username: null,
        phone: null
      },
      rules1: {
        username: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        phone: [
          {
            validator: validatePhone,
            required: true,
            message: '请输入用户手机号',
            trigger: 'blur'
          }
        ]
      },
      titleKey: null
    }
  },
  mounted() {
    this.getList(this.listForm)
  },
  inject: ['reload'],
  methods: {
    keywordFn(type, id) {
      this.addForm.username = ''
      console.log(type, id)
      this.dialogVisible = true
      if (type == 'add') {
        this.titleKey = '新建关键字'
      }
      if (type == 'edit') {
        this.addForm.username = id
        this.titleKey = '编辑关键字'
      }
    },
    // 弹窗关闭
    handleClose() {
      this.dialogVisible = false
    },
    // 添加提交
    addSubmit() {
      this.$refs['addForm'].validate(valid => {
        if (valid) {
          const datas = this.addForm
          // knifeUserAdd(datas).then(res=>{
          //     console.log(res)
          //     if(res.data.code==200){
          //         this.succStatus(res.data.msg)
          //     }else{
          //         this.$message.error(res.data.msg)
          //     }
          //     this.reload()
          // })
          // .catch(error=>{
          //     this.$message.error(error)
          //     this.reload()
          // })
          this.dialogVisible = false
          console.log(datas)
          this.reload()
        } else {
          this.$message({
            message: '必填项不能为空',
            type: 'warning'
          })
        }
      })
    },
    // 序号
    table_index(index) {
      return (this.form.pageNum - 1) * this.form.pageSize + index + 1
    },
    // 成功状态弹窗
    succStatus(txt) {
      this.$message({
        message: txt + '成功',
        type: 'success'
      })
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.$message.error(txt + '失败')
    },
    // 列表数据获取
    getList(e) {
      this.tableLoading = false
      // this.tableLoading = true
      // let datas = e
      // vipManage.getSearchList(datas).then(res => {
      //     // console.log(res)
      //     if(!res.data.code){
      //         // console.log(res)
      //         this.tableData = res.data.data.list
      //         this.page_totals = res.data.data.count
      //     }else{
      //         this.$message.error(res.data.msg);
      //     }
      //     this.tableLoading = false
      // })
      // .catch(error =>{
      //     this.$message.error(error);
      // })
    },
    // 改变页面条数
    handleSizeChange(val) {
      this.form.pageSize = val
      this.getList(this.form)
    },
    // 选择页数
    handleCurrentChange(val) {
      this.form.pageNum = val
      this.getList(this.form)
    }
  }
}
</script>
<style scoped>
/* 分页 */
.pagesCon {
  height: 40px;
  margin-top: 20px;
}
.pagesCon > div {
  float: right;
}
/* 表单样式修改 */
.el-range-editor--medium.el-input__inner {
  width: 236px;
}
</style>
